<template>
    <div class="Tool">
        <div id="MindMapBox"></div>
        <div
            class="MindMapBoxMask"
            :class="{
                maskActive: maskClass
            }"
            v-if="MindMapBoxMask"
            @click="selectSpringFS(null)"
            @mousedown="mousedownFS()"
            @mouseup="mouseupFS()"
        >
            <div
                class="MindMapBoxSvgMask"
                :class="{
                    maskActive: maskClass
                }"
                :style="{
                    width: `${MindMap.width}px`,
                    height: `${MindMap.height}px`,
                    left: `${MindMap.x}px`,
                    top: `${MindMap.y}px`,
                    transform: `scale(${MindMap.scaleNum})`,
                }"
                @mouseout="mouseoutFS()"
                @mouseover="mouseoverFS()"
            >
                <SpringItem
                    v-for="(item, index) in this.MindMap.mindSpring"
                    :key="index"
                    :springData="item"
                    :selectSpring="judgeSelectSpringFS(item.id)"
                />
            </div>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import { MindMap } from '@/editor/index.umd.js';
import toolJson from '@/editor/TJSON';
import SpringItem from './comp/SpringItem.vue';

export default {
    name: 'Tool',
    components: {
        SpringItem,
    },
    data() {
        return {
            MindMap: {},
            MindMapBoxMask: false,
            selectItem: null,
            maskClass: false,
        };
    },
    mounted() {
        this.MindMap = new MindMap('MindMapBox', {
            eventSelectFS: this.eventSelectFS,
        });
        this.MindMap.initFS(toolJson).then((result) => {
            // this.MindMapBoxMask = true;
            console.log(
                this.MindMap,
                'this.MindMap--->result',
                this.MindMapBoxMask
            );
        });
    },
    methods: {
        eventSelectFS(data) {
            this.selectItem = data;
        },
        judgeSelectSpringFS(id) {
            let judgeData = false;
            if (this.selectItem && id === this.selectItem.id) {
                judgeData = true;
            }
            return judgeData;
        },
        selectSpringFS(data) {
            this.MindMap.selectMindMapFS(data);
        },
        stopPTFS(e) {
            e.stopPropagation();
            e.preventDefault();
        },
        mouseoutFS() {
            this.MindMap.mousedown = false;
            this.mouseover = false;
        },
        mouseoverFS() {
            this.MindMap.mouseover = true;
        },
        mousedownFS() {
            this.maskClass = true;
        },
        mouseupFS() {
            this.maskClass = false;
        },
    },
};
</script>

<style lang="scss" scoped>
@media (prefers-color-scheme: dark) {
}
@media (prefers-color-scheme: light) {
}

.Tool {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: linear-gradient(rgba(130, 132, 138, 50%) 4px, transparent 4px),
        linear-gradient(90deg, rgba(130, 132, 138, 50%) 4px, transparent 4px),
        linear-gradient(rgba(96, 98, 102, 50%) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 98, 102, 50%) 1px, transparent 1px);
    background-size: 200px 200px, 200px 200px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    box-sizing: border-box;
    border: 2px solid rgba(130, 132, 138, 50%);
    border-radius: 4px;
    #MindMapBox {
        width: 100%;
        height: 100%;
    }
    .MindMapBoxMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .MindMapBoxSvgMask {
            min-width: 100%;
            min-height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .maskActive{
        cursor: pointer!important;
    }
}
</style>
